<template>
  <el-menu
    class="sidebar-el-menu"
    :default-active="onRoutes"
    :collapse="collapse" 
    text-color="#bfcbd9"
    active-text-color="#20a0ff"
    unique-opened
    router
  >
    <template v-for="item in items">
      <template v-if="item.subs">
        <el-submenu
          :index="item.index"
          :key="item.index"
        >
          <template slot="title">
            <i :class="item.icon" /><span slot="title">{{ item.title }}</span>
          </template>
          <template v-for="subItem in item.subs">
            <el-submenu
              v-if="subItem.subs"
              :index="subItem.index"
              :key="subItem.index"
            >
              <template slot="title">
                {{ subItem.title }}
              </template>
              <el-menu-item
                v-for="(threeItem,i) in subItem.subs"
                :key="i"
                :index="threeItem.index"
              >
                {{ threeItem.title }}
              </el-menu-item>
            </el-submenu>
            <el-menu-item
              v-else
              :index="subItem.index"
              :key="subItem.index"
            >
              {{ subItem.title }}
            </el-menu-item>
          </template>
        </el-submenu>
      </template>
      <template v-else>
        <el-menu-item
          :index="item.index"
          :key="item.index"
        >
          <i :class="item.icon" /><span slot="title">{{ item.title }}</span>
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>
<style>
     .iconfont{
         font-size: 1.4em;
        margin-right: 4px;
    }
</style>
<script>
    // import bus from '../common/bus';
    export default {
		props:['collapse'],
        data() {
            return {
                // collapse: false,
                items: [
                    {
                        icon: 'iconfont icon-fangzi',
						index:'/',
                        title: '后台首页'
                    },{
                        icon: 'iconfont icon-shezhi',
                        title: '系统管理',
						index: 'system',
						subs:[{
							icon: 'el-icon-edit-outline',
							index: 'system_safe',
							title: '基础设置'
						},{
							icon: 'el-icon-edit-outline',
							index: 'system_safeUrl',
							title: '放行接口'
						},{
							icon: 'el-icon-edit-outline',
							index: 'system_func',
							title: '限行接口'
						},{
							icon: 'el-icon-edit-outline',
							index: 'system_group',
							title: '分组管理'
						},{
							icon: 'el-icon-edit-outline',
							index: 'system_user',
							title: '人员管理'
						}],
                    },
//                     {
//                         icon: 'iconfont icon-Icon-zhuanjiatuanduiguanli',
//                         title: '团队管理',
// 						index: 'admin',
// 						subs:[{
// 							icon: 'el-icon-edit-outline',
// 							index: 'admin_user',
// 							title: '团队成员'
// 						},{
// 							icon: 'el-icon-edit-outline',
// 							index: 'admin_rank',
// 							title: '职务管理'
// 						},{
// 							icon: 'el-icon-edit-outline',
// 							index: 'admin_myFunc',
// 							title: '我的权限范围'
// 						}],
//                     },
//                     {
//                         icon: 'iconfont icon-yonghuguanli',
//                         title: '用户管理',
// 						index: 'user',
// 						subs:[{
// 							icon: 'iconfont icon-yonghuguanli',
// 							index: 'user_list',
// 							title: '用户列表'
// 						}]
//                     }
                ]
            }
        },
        computed:{
            onRoutes(){
				// return 1;
                return this.$route.path.replace(" ",'');
            }
        },
        created(){
            // 通过 Event Bus 进行组件间通信，来折叠侧边栏
//             bus.$on('collapse', msg => {
//                 this.collapse = msg;
//             })
        }
    }
</script>

<style scoped>
   .sidebar{
		height: 100%;
		display: block;
		left: 0;
        top: 0px;
        bottom:0;
    }
    .sidebar::-webkit-scrollbar{
        width: 0;
    }
    .sidebar-el-menu:not(.el-menu--collapse){
        width: 250px;
    }
</style>
